<template>
  <div class="viewer">
    <div class="bg"></div>
    <div class="viewerPhoto">
      <img :src="getImageUrl(photos[index]?.imgUrl)" alt="" />
    </div>

    <div class="switch sw-left" @click="last">
      <span class="iconfont icon-angle-right"></span>
    </div>

    <div class="switch sw-right" @click="next">
      <span class="iconfont icon-angle-right"></span>
    </div>
    预览
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits} from "vue"
// import { phone } from "../mock/mock"

// 在顶部添加
const getImageUrl = (name) => {
  return new URL(`../assets/images/${name}.jpg`, import.meta.url).href
}

const emits = defineEmits(['changeIndex'])

const props = defineProps({
  photos: {
    type: Array,
    default: () => []
  },
  currentIndex: {
    type: Number,
    default: 0
  },
  photo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const index = ref(props.currentIndex)


function last() {
  console.log(index.value)
  index.value -= 1 
  if(index.value < 0) {
    index = props.photos.length
  }
  emits('changeIndex', index.value)
}

function next() {
  index.value += 1
  if(index.value > props.photos.length) {
    index.value = 0
  }
  emits('changeIndex', index.value)
}


</script>

<style lang="less" scoped>
.viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
  }

  .viewerPhoto {
    box-sizing: border-box;
    position: absolute;
    padding: 82px 40px;
    width: calc(100% - 360px);
    overflow-y: auto;
    display: flex;
    justify-content: center;
    img {
      width: 100%;
    }
  }

  .switch {
    position: absolute;
    width: 56px;
    height: 56px;
    top: 50%;
    border-radius: 50%;
    background: @gray-3;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @gray-10;
    cursor: pointer;
    opacity: .5;
    transition: .2s;
    &:hover {
      opacity: 1;
    }

  }
  .switch.sw-left {
    left: 20px;
    .icon-angle-right {
      display: inline-block;
      transform: rotate(180deg);
    }
  }

  .sw-right {
    right: calc(360px + 20px);
    
  }
}
</style>
